<template>
  <div>
    <head>
      <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

      <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

      <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
      </script>
    </head>
    <header class="header">
      <!-- <el-menu :default-active="index" class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
      <el-menu :default-active="index" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="0"><img src="../assets/img/f.png" /></el-menu-item>
        <el-menu-item index="1">
          <router-link class="rolink" to="/">首页</router-link>
        </el-menu-item>
        <el-menu-item index="7">
          <router-link class="rolink" to="/rank">排行</router-link>
        </el-menu-item>
        <el-menu-item v-show="this.loginInfo.id?true:false" index="2">
          <router-link class="rolink" to="/cfcourse">推荐</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link class="rolink" to="/course">课程</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link class="rolink" to="/teacher">名师</router-link>
        </el-menu-item>
        <el-menu-item v-show="this.loginInfo.id?true:false" index="8">
          <router-link class="rolink" to="/mycourse">我的课程</router-link>
        </el-menu-item>
        <el-menu-item v-show="this.loginInfo.id?true:false" index="9">
          <router-link class="rolink" to="/cccourse">我的收藏</router-link>
        </el-menu-item>
        <!-- <el-menu-item index="5">
          <router-link class="rolink" to="/course">社区</router-link>
        </el-menu-item> -->
        <el-menu-item>
          <div style="display: inline-block;margin-top: 0rem;float: left;">
            <el-select
                class="elselect"
                v-model="value"
                filterable
                clearable
                remote
                reserve-keyword
                allow-create
                loading-text="正在加载....."
                placeholder="搜索感兴趣的课程内容"
                :remote-method="remoteMethod"
                :loading="loading">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              <el-button size="mini" @click="queryclick(value)" style="margin-right: 14.25rem;" type="warning" icon="el-icon-search"></el-button>
          </div>

        </el-menu-item>
        <el-menu-item style="float: right;" v-show="this.loginInfo.id?false:true">
          <a class="urolink" @click="centerDialogVisible = true">登录</a>
          <router-link class="rolink" to="#">|</router-link>
          <a class="urolink" @click="centerDialogVisibleregister=true">注册</a>
        </el-menu-item>
        <el-menu-item style="float: right;" v-show="this.loginInfo.id?true:false">
          <!-- <span>{{this.loginInfo.nickname}}</span> -->
          <!-- 用户头像 -->
          <el-avatar :size="30" :src="loginInfo.avatar"></el-avatar>
          <el-popover
            placement="bottom"
            width="20"
            trigger="hover">
            <div>
              <el-button @click="intousercenter(loginInfo.id)" class="uiconfig" style="margin-left: 20%;color: #47494E;" icon="el-icon-user-solid" type="text">个人中心</el-button>
            </div>
            <div>
              <el-badge :value="200" :max="99" class="item">
                <el-button class="uiconfig" style="margin-left: 30%;color: #47494E;" type="text" icon="el-icon-message-solid">消息中心</el-button>
              </el-badge>
            </div>
            <div>
              <el-button @click="intomyorder(loginInfo.id)" class="uiconfig" style="margin-left: 20%;color: #47494E;" icon="el-icon-shopping-cart-1" type="text">我的订单</el-button>
            </div>
            <div>
              <el-button @click="dialogVisibleshezhi=true" class="uiconfig" style="margin-left: 20%;color: #47494E;" icon="el-icon-s-tools" type="text">设置</el-button>
            </div>
            <div>
              <el-button @click="logout" class="uiconfig" style="margin-left: 20%;color: #47494E;" icon="el-icon-s-unfold" type="text">退出</el-button>
            </div>
            <el-button style="color: #99A9BF;" type="text" slot="reference">{{this.loginInfo.nickname}}<i class="el-icon-caret-bottom"></i></el-button>
          </el-popover>
        </el-menu-item>


      </el-menu>
    </header>
    <el-dialog title="邮箱登录" :visible.sync="centerDialogVisible" width="300px" :before-close="handleClose" style="opacity: 0.85;" center>
      <div class="input-group" id="userinfox">
        <span class="input-group-addon" id="sizing-addon2">@</span>
        <input v-model="uicenterMember.email" type="text" class="form-control" placeholder="请输入邮箱" aria-describedby="sizing-addon2">
      </div>
      <div class="input-group" id="userinfo">
        <span class="input-group-addon" id="sizing-addon2">密码</span>
        <input v-model="uicenterMember.password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="sizing-addon2">
      </div>
      <div class="input-group" id="userinfo">
        <el-button @click="loginsubmit(uicenterMember)" class="userlogin" size="small" aria-describedby="sizing-addon2">登录</el-button>
      </div>

      <div>
        <!-- <iframe>
          <button @click="wechatlogin">微信登录</button>
          <!-- <img class="wechat" @click="wechatlogin" height="40" width="40" src="../assets/img/wicon.png"> -->
        <img class="wechat" @click="wechatlogin" height="40" width="40" src="../assets/img/wicon.png">
      </div>
      <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span> -->
    </el-dialog>
    <!-- 注册弹出框 -->
    <el-dialog title="用户注册" :visible.sync="centerDialogVisibleregister" width="300px"
    :before-close="handleClose"
    style="opacity: 0.85;" center>
      <div class="input-group" id="userinfox" prop="email">
        <span class="input-group-addon" id="sizing-addon2">@</span>
        <input v-model="uiuserRegisterVo.email" type="text" class="form-control" placeholder="请输入邮箱"
          aria-describedby="sizing-addon2" autocomplete="off">
      </div>
      <!-- <el-button v-show="this.show" type="text" @click="getsmsCode(uiuserRegisterVo.email)">获取验证码</el-button>
      <span style="color: #A9A9A9;" v-show="!show" class="count">倒计时:{{this.count}} s</span> -->
      <div class="input-group" id="userinfox">
        <span class="input-group-addon" id="sizing-addon2">用户名</span>
        <input v-model="uiuserRegisterVo.nickname" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="sizing-addon2">
      </div>
      <div class="input-group" id="userinfo">
        <span class="input-group-addon" id="sizing-addon2">密码</span>
        <input v-model="uiuserRegisterVo.password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="sizing-addon2">
      </div>
      <div class="input-group" id="userinfo">
        <span class="input-group-addon" id="sizing-addon2">密码</span>
        <input v-model="passwordx" type="password" class="form-control" placeholder="确认密码" aria-describedby="sizing-addon2">
      </div>
      <!-- <div class="input-group" id="userinfo">
        <span class="input-group-addon" id="sizing-addon2">验证码</span>
        <input v-model="uiuserRegisterVo.code" style="width: 11.0rem;display: inline-block;" type="text" class="form-control" placeholder="请输入验证码"
          aria-describedby="sizing-addon2">
      </div> -->

      <div class="input-group" id="userinfo">
        <input v-model="uiuserRegisterVo.code" type="text" class="form-control" placeholder="请输入验证码" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2" v-show="this.show">
          <el-button size="mini" style="height: 10px;line-height: 10px;" v-show="this.show" type="text" @click="getsmsCode(uiuserRegisterVo.email)">获取验证码</el-button>
        </span>
        <span class="input-group-addon" id="basic-addon2" style="color: #FF4500;" v-show="!show">倒计时:{{this.count}} s</span>
      </div>

      <div style="margin-top: 20px;">
        <el-radio-group v-model="uiuserRegisterVo.sex" size="mini">
          <el-radio label="2" value="2" border>男</el-radio>
          <el-radio label="1" value="1" border>女</el-radio>
        </el-radio-group>

      </div>
      <div class="input-group" id="userinfo">
        <el-button @click="restform" class="userloginrr" size="small" aria-describedby="sizing-addon2">重置</el-button>
        <el-button @click="submitandregister" class="userloginrs" size="small" aria-describedby="sizing-addon2">提交</el-button>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span> -->
    </el-dialog>
    <!-- 设置 -->
    <el-dialog
      title="邮箱服务"
      :visible.sync="dialogVisibleshezhi"
      width="30%"
      :before-close="handleClose">
      <span>是否接收课程推荐、学习周报等邮箱信息提醒？</span>
      <div style="width: 40rem;height: 10rem;margin-top: 4rem;">
        <el-switch
          v-model="shezhivalue"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="接收"
          inactive-text="不接收">
        </el-switch>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleshezhi = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleshezhi = false">确 定</el-button>
      </span>
    </el-dialog>
    <body class="body">
      <nuxt class="nn" />
    </body>
    <footer style="margin-left: auto;margin-right: auto;text-align: center;">
      <span  style="font-size: 8px;color: #99A9BF">关于我们 qq2190033734</span>
    </footer>
  </div>
</template>

<script>
  import sms from '@/api/edu/sms/sms'
  import register from '@/api/edu/register/register'
  import login from '@/api/edu/login/login'
  import cookie from 'js-cookie'
  import course from '@/api/edu/course/course'
  export default {
    data() {
      return {
        index: 0,
        getcodeshow: false,
        show: true,
        count: '',
        timer: null,
        centerDialogVisible: false, //登录
        centerDialogVisibleregister: false, //注册
        dialogVisibleshezhi:false, //设置
        shezhivalue: false,
        passwordx: '',//确认密码
        //用户注册参数
        uiuserRegisterVo: {
          code: '',
          email: '',
          mobile: ' ',
          nickname: '',
          password: '',
          sex: ''
        },
        //用户注册参数校验
        rules: {
          email: [ { required: true, message: '请填写活动形式', trigger: 'blur' }],
        },
        //登录参数
        uicenterMember: {
          email: '',
          password: ''
        },
        loginInfo: {},
        islogin: false,
        options: [],
                value: '',
                list: [],
                loading: false,
                states: ['jjj','jjj'],
                tesdata:  [],
                loading: false,
                a:null,
      }
    },
    created(){
      if(this.$route.query.code){
        console.log(this.$route.query)
        console.log(this.$route.query.code)
      }
      if(this.$route.query.token){
        cookie.set('uiuser_token',this.$route.query.token)//设置名字 值  作用范围
        login.getuserinfobytokens().then(responsex => {
          this.loginInfo=responsex.data.data.uicenterMember
          //获取的用户信息返回到cookie中
          cookie.set('uicenterMember',JSON.stringify(responsex.data.data.uicenterMember))//设置名字 值  作用范围
          // location.replace('/')
          // if(uicenterMembers){
          //   this.loginInfo=JSON.parse(uicenterMembers)
          // }
          // // alert(JSON.stringify(uicenterMembers))
          // console.log('测试登录结果数据：',this.loginInfo)
          //可以跳转
        })
      }
      if(cookie.get("uicenterMember")){
        console.log('测试登录信息存在情况:',cookie.get("uicenterMember"))
        this.loginInfo=JSON.parse(cookie.get("uicenterMember"))
        console.log('测试登录信息存在情况:',this.loginInfo)
      }
      console.log('测试登录信息存在情况:',cookie.get("uicenterMember"))
    },
    methods: {
      getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
            var context = "";
            if (r != null) context = r[2];
            reg = null;
            r = null;
            return context == null || context == "" || context == "undefined"
              ? ""
              : context;
          },
      //微信登录
      wechatlogin(){
        location.href="http://119.3.83.202:9001/api/ucenter/wx/login"

      },
      //跳转至用户中心
      intousercenter(userid){
        this.$router.push({
          name: 'uiusercenter-id',
          params: {id: userid}
        })
      },
      intomyorder(userid){
        this.$router.push({
          name: 'myorder-id',
          params: {id: userid}
        })
      },
      //登出
      logout(){
        this.loginInfo={}
        // cookie.set('uiuser_token','',{domain: 'localhost'})//设置名字 值  作用范围
        // cookie.set('uicenterMember','',{domain: 'localhost'})//设置名字 值  作用范围
        cookie.remove('uiuser_token')
        cookie.remove('uicenterMember')
        location.replace('/')//无法后退

      },
      //登录
      loginsubmit(uicenterMember){
        if(uicenterMember.email=='' || uicenterMember.password==''){
          this.$message({
            type: 'error',
            message: '请输入邮箱和密码'
          })
        }else{
          login.userloginui(uicenterMember).then(response => {
            if(response.data.code===20001){
              this.$message({
                type: 'error',
                message: '邮箱或者密码错误'
              })
              return false
            }
            let num = 2 //失效时间是几小时
            let time= new Date(new Date().getTime() + 60 * 1000)
            //把token 放在cookie 中 ，也可以放在localStorage中
            cookie.set('uiuser_token',response.data.data.token)//设置名字 值  作用范围
            console.log('测试token:',cookie.get('uiuser_token'))
            //拦截器 判断

            //根据token 获取用户信息
            login.getuserinfobytokens().then(responsex => {
              this.loginInfo=responsex.data.data.uicenterMember
              //获取的用户信息返回到cookie中
              cookie.set('uicenterMember',JSON.stringify(responsex.data.data.uicenterMember))//设置名字 值  作用范围
              if(this.loginInfo.id){
                this.uicenterMember.email=''
                this.uicenterMember.password=''
                this.centerDialogVisible=false
              }
              // if(uicenterMembers){
              //   this.loginInfo=JSON.parse(uicenterMembers)
              // }
              // // alert(JSON.stringify(uicenterMembers))
              // console.log('测试登录结果数据：',this.loginInfo)
              //可以跳转
            })
          })
        }

      },

      //验证码倒计时
      getCode(){
           const TIME_COUNT = 300;
           if (!this.timer) {
             this.count = TIME_COUNT;
             this.show = false;
             this.timer = setInterval(() => {
             if (this.count > 0 && this.count <= TIME_COUNT) {
               this.count--;
              } else {
               this.show = true;
               clearInterval(this.timer);
               this.timer = null;
              }
             }, 1100)
            }
         },
      //注册信息提交并校验
      submitandregister(){
        if(this.uiuserRegisterVo.email=='' || this.uiuserRegisterVo.password==''
         || this.uiuserRegisterVo.nickname=='' || this.uiuserRegisterVo.code=='' ||
         this.uiuserRegisterVo.sex=='' || this.passwordx==''){
           this.$message({
             type: 'error',
             message: '用户参数不能为空'
           })
         }else{
           if(this.uiuserRegisterVo.password!=this.passwordx){
             this.$message({
               type: 'error',
               message: '请重新确认密码'
             })
           }else{
             //提交
             console.log('测试提交的用户参数：',this.uiuserRegisterVo)
             register.registerui(this.uiuserRegisterVo).then(response => {
               if(response.data.code===20001){
                 this.$message({
                   type: 'error',
                   message: response.data.message
                 })
               }else{
                 this.centerDialogVisibleregister=false
                 this.restform()
                 this.show=true
                 this.timer = null
                 this.count=''
                 this.$message({
                   type: 'success',
                   message: '注册成功，可以登录'
                 })
               }

             })
           }
         }

      },
      //注册框重置
      restform(){
        this.uiuserRegisterVo.email=''
        this.uiuserRegisterVo.password=''
        this.uiuserRegisterVo.nickname=''
        this.uiuserRegisterVo.code=''
        this.uiuserRegisterVo.sex=''
        this.passwordx=''
      },
      //弹窗关闭
       handleClose(done) {
         this.uicenterMember.email=''
         this.uicenterMember.password=''

         this.uiuserRegisterVo.email=''
         this.uiuserRegisterVo.password=''
         this.uiuserRegisterVo.nickname=''
         this.uiuserRegisterVo.code=''
         this.uiuserRegisterVo.sex=''
         this.passwordx=''
         done()
              // this.$confirm('确认关闭？')
              //   .then(_ => {
              //     done();
              //   })
              //   .catch(_ => {});
            },
      //注册 获取电子验证码
      getsmsCode(email){
        sms.getsmscode(email).then(response => {
         console.log('测试验证码:',response.data.code)
         if(response.data.code===20000){
           this.getCode()
           this.$message({
             type: 'success',
             message: '邮箱验证码已发送，请查收'
           })
         }else{
           this.$message({
             type: 'error',
             message: '无法获取邮箱验证码'
           })
         }
        })
      },

      //点击搜索
      queryclick(title){
        console.log('测试按钮：',title)
        if(title!=''){
          this.value=''
          // course.seachcourseinfo(title).then(response =>{
          //   // this.allcourseinfo=response.data.data.eduCourses
          //   // this.total=this.allcourseinfo.length
          //   this.value=''
          //   // console.log('测试按钮返回结果:',this.allcourseinfo)

          //   //分页
          //   // var aa=Math.ceil(this.total/10)
          //   // console.log('测试向上取证：',aa)
          //   // this.splitedcouseifo=this.group(this.allcourseinfo,10);
          //   // console.log('测试分页结果：',this.splitedcouseifo)
          //   // this.currentcourseinfo=this.splitedcouseifo[0]
          //   // this.UiCourseVoquery.subjectone='全部'
          //   // this.UiCourseVoquery.subjecttwo='不限'
          //   // this.UiCourseVoquery.indexinfo='默认排序'
          // })
          this.$router.push({
            name: 'course',
            params: {
              coursetitle: title
            }
          })
        }

      },
      //远程搜索框实现方法
      remoteMethod(query) {
              if (query !== '') {
                this.loading = true;
                let res=[]
                // setTimeout(() => {
                  //获取远程结果
                  course.remotegetcoursetitle(query).then(response =>{
                    this.states=[]
                    if(response.data.data.eduCourses.length>0){
                      console.log('测试远程搜索：',response.data.data.eduCourses)
                      this.options=response.data.data.eduCourses
                      res=response.data.data.eduCourses
                    }else{
                      res=[]
                    }
                  })
                  this.loading = false;
                  this.options = res

                // }, 200);
              } else {
                this.options = [];
              }
              console.log('测试options:',this.options)
            },

    }
  }
</script>

<style>
  .wechat{
    margin-left: 10.5rem;
    margin-top: 2.25rem;
  }
  .uiconfig:hover{
    font-weight: bold;
  }
  .userloginrr {
    background-color: #CDDCDC;
    background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
    background-blend-mode: screen, overlay;
    width: 12rem
  }

  .userloginrr:hover {
    background-color: #CDDCDC;
    background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
    background-blend-mode: screen, overlay;
    width: 12rem;
    font-weight: bold;
  }

  .userloginrs {
    background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
    width: 12rem
  }

  .userloginrs:hover {
    background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
    width: 12rem;
    color: white;
  }

  .userlogin {
    background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
    width: 25rem
  }

  .userlogin:hover {
    background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
    width: 25rem;
    color: white;
  }
  #userinfox{
    margin-top: 1.125rem;
  }
  #userinfo {
    margin-top: 0.525rem;
  }

  #userinfo {
    margin-top: 1.125rem;
  }

  .rolink {
    text-decoration: none;
  }

  .urolink {
    text-decoration: none;
  }

  .urolink:hover {
    text-decoration: none;
    font-weight: bold;


  }

  .header {
    position: fixed;
    width: 100%;
    height: 10rem;
    top: 0;
    z-index: 222;
    margin-left:auto;
    margin-right: auto;
  }

  .body {
    z-index: 1;
  }

  .nn {
    z-index: 1;
    padding-top: 6.25rem;
  }
  /* 搜索框样式 */
   .el-select .el-input.is-focus .el-input__inner{
       border:0px;
     }
     .el-select .el-input .el-input__inner{
         border:0px;
       }
  .el-button--warning {
      color: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);;
      background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
      border-color: #F2F2F2;
    }
    .el-button--warning:hover{
      color: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);;
      background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
      border-color: #F2F2F2;
    }
    .el-button--warning:focus{
     color: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);;
     background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
     border-color: #F2F2F2;
    }
    /* router-link去掉下划线 */
    .router-link-active {
        text-decoration: none;
      }
</style>
